<m-card [autoHeight]="true" [hideHead]="false" *ngIf="details$ | async as task">
  <ng-container card-head>
    <div class="task-property">
      <span><a class="task-property-key">任务类型：</a>{{ task.type | taskType }}</span>
      <span>
        <a class="task-property-key">任务状态：</a>
        <a [ngClass]="{
            'g-nowrap text-success': task.jobs[0].status == taskStatus.Finish,
            'g-nowrap text-danger': task.jobs[0].status == taskStatus.Failed,
            'g-nowrap text-muted': task.jobs[0].status == taskStatus.Running,
            'g-nowrap text-info': task.jobs[0].status == taskStatus.Waiting
          }">{{ task.jobs[0].status | taskStatus }}</a>
      </span>
      <span><a class="task-property-key">执行对象：</a>{{ task.target | taskTarget }}</span>
      <span><a class="task-property-key">任务时间属性：</a>{{ task.period_type | taskPeriodType }}</span>
      <span><a class="task-property-key">任务创建时间：</a>{{ task.created_at | date }}</span>
      <span><a class="task-property-key">任务执行时间：</a>{{ task.jobs[0].start_at | date }}</span>

      <span class="push">
        <ng-container *ngIf="
            task.jobs[0].status == taskStatus.Running || task.jobs[0].status == taskStatus.Waiting;
            else enableRef
          ">
          <button class="btn btn-outline-danger" (click)="pauseTask([task.jobs[0].id])">
            暂停
          </button>
        </ng-container>
        <ng-template #enableRef>
          <button *ngIf="task.jobs[0].status == taskStatus.Pause" class="btn btn-outline-success"
            (click)="resumeTask([task.jobs[0].id])">
            继续
          </button>
        </ng-template>
        <button *ngIf="canCancel(task.jobs[0])" class="btn btn-outline-primary ml-3"
          (click)="cancelTask([task.jobs[0].id])">
          取消
        </button>
      </span>
    </div>
  </ng-container>

  <ng-container card-body-head>
    <ng-container *ngIf="task.type == taskType.Client">
      <div class="body-head">
        <span><a class="task-property-key">架构：</a>{{ task.content.arch  }}</span>
        <span><a class="task-property-key">版本：</a>{{ task.content.version  }}</span>
        <span *ngIf="task.content.period"><a class="task-property-key">任务执行最短周期：</a>{{ task.content.period  }}　小时</span>
        <span *ngIf="task.content.start_time_at && task.content.end_time_at"><a
            class="task-property-key">任务下发时间范围：</a>{{ task.content.start_time_at  }}－{{task.content.end_time_at}}</span>
        <span *ngIf="task.content.download_speed"><a
            class="task-property-key">终端网络速度上限：</a>{{ task.content.download_speed  }}　kb/s</span>
      </div>
    </ng-container>

    <div class="body-head">
      <div class="task-process" *ngIf="task.content.script_name">
        <span class="task-property-key"> 执行脚本: </span>
        <span> {{task.content.script_name }}</span>
        <button (click)="onView(task.content)" class="btn btn-sm btn-secondary ng-star-inserted">查看</button>
      </div>
      <div class="task-process" *ngIf="task.content.script_desc">
        <span class="task-property-key"> 脚本说明: </span>
        <span> {{task.content.script_desc }}</span>
      </div>
      <span>
        <a class="task-property-key">执行区域：</a>
        <a *ngFor="let zone of task.areas; let i = index">{{ zone.name }}
          <a *ngIf="i < task.areas.length - 1">，</a>
        </a>
      </span>
      <div class="task-process">
        <span class="task-property-key"> 执行进度: </span>
        <span>
          <div class="progress m-progress--sm">
            <div class="progress-bar m--bg-brand" [style.width]="task.jobs[0].finish / task.jobs[0].total | percent">
            </div>
          </div>
        </span>
        <span>
          {{ task.jobs[0].finish }}
          {{ task.type | taskReplyUnit }} / {{ task.jobs[0].total }}
          {{ task.type | taskReplyUnit }}
        </span>
      </div>
    </div>
  </ng-container>
  <m-task-computer-list [hidden]="task.type != taskType.SystemUpgrade" [list]="task.jobs[0].computers">
  </m-task-computer-list>
  <m-task-script-list [hidden]="task.type != taskType.Script && task.type != taskType.UsbAuth"
    [period_type]="task.jobs[0].period_type" [list]="task.jobs[0].computers">
  </m-task-script-list>
  <m-task-policy-list [hidden]="task.type != taskType.Policy" [list]="task.jobs[0].computers">
  </m-task-policy-list>
  <m-task-personnel-list [hidden]="task.type != taskType.Message" [list]="task.jobs[0].users">
  </m-task-personnel-list>
  <m-task-software-list [hidden]="task.type != taskType.SoftwareUpgrade" [list]="task.jobs[0].softwares"
    [areaCount]="task.jobs[0].area_count">
  </m-task-software-list>
  <m-task-client-list [hidden]="task.type != taskType.Client" [list]="task.jobs[0].computers">
  </m-task-client-list>
</m-card>

<ng-template #viewRef>
  <div class="modal-header">
    <h3>{{ group.script_name }} - 内容查看</h3>
  </div>
  <div class="modal-body view">
    <perfect-scrollbar>
      <ng-container *ngIf="group.script.startsWith('blob:'); else contentDataRef">
        <ng-container *ngIf="group.script | fetch | async as content; else progressRef">
          <code>{{ group.script }}</code>
        </ng-container>
        <ng-template #progressRef>
          <div class="spinner-container">
            <mat-spinner></mat-spinner>
          </div>
        </ng-template>
      </ng-container>
      <ng-template #contentDataRef>
        <code>{{ group.script }}</code>
      </ng-template>
    </perfect-scrollbar>
  </div>
</ng-template>